{% extends "baseD.html" %}

{% block headtitle %}- Register Pan-Tilt-Zoom Camera{% endblock %}

{% block divtitle %}- Register Pan-Tilt-Zoom Camera{% endblock %}

{% block css %}
	<link href="/live3dstatic/css/build.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/ptzBuild.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/earth.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/earthPoint.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/canvas.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/canvasPolygon.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/canvasPoint.js"></script>
<script type="text/javascript">
	var ptzBuild2D;
	var ptzBuild3D;
	var numberOfClicks = 0;
	
	function registerClick(){
		numberOfClicks = numberOfClicks + 1;
		document.getElementById('numberOfClicks').value = numberOfClicks;
	}
	
	document.onclick = registerClick;
	
	function clockIn(){
		// year, month, day, hour, minute, second
		var formObj = document.getElementById('clockInTime');
		var dateStr = '';
		var date = new Date();
		formObj.value = Math.floor(date.getTime() / 1000);
	}
	
	function init2D(){
		ptzBuild2D = new PTZBuild2D('{{baseURL}}');
	}

	function init3D(){
		{% if ptzScene %}
			var alt = ge.getGlobe().getGroundAltitude({{ptzScene.cameraLatitude}}, {{ptzScene.cameraLongitude}});
			ptzBuild3D = new PTZBuild3D({{ptzScene.cameraLatitude}}, {{ptzScene.cameraLongitude}}, alt);
			jumpTo({{ptzScene.cameraLatitude}}, {{ptzScene.cameraLongitude}});
		{% else %}
			ptzBuild3D = new PTZBuild3D(0, 0, 0);
		{% endif %}
	}
	
	function validateForm(){
		var ptzReady = ptzBuild2D.ptzValuesReady;
		if (! ptzReady){
			// this should never happen because the user can't even press the form submit button until they rotate the camera.
			document.getElementById('warning').innerHTML = 'First rotate the camera.  Wait, how did this happen.'
			return false;
		}
		var moved2D = ptzBuild2D.validateMovedPoints();
		if (moved2D != ''){
			document.getElementById('warning').innerHTML = 'Move the ' + moved2D + ' point around the image.'
			return false;
		}
		var moved3D = ptzBuild3D.validateMovedPoints();
		if (moved3D != ''){
			document.getElementById('warning').innerHTML = 'Move the ' + moved3D + ' point around the globe.'
			return false;
		}
		document.getElementById('warning').innerHTML = '';
		ptzBuild2D.dumpToHTML();
		ptzBuild3D.dumpToHTML();
		
		return true;
		
	}
</script>
{% endblock %}

{%block onload %}clockIn(); init2D(); googleInit();{% endblock %}
		
{% block content %}
	
    <div id="contentpage"  style="margin-left:40px; margin-right:40px;">
  <div id="leftside">
	 <div class="group">
		<!-- PTZ area. -->
		<div id="PTZappletGroup">
				<applet archive="LiveApplet.zip" codebase="{{codeBaseURL}}"
									code="LiveApplet.class" width="450" height="380">
									<param name="cabbase"	value="LiveApplet.cab"/>
									<param name="video_width"	value="320"/>
									<param name="url"		value="{{baseURL}}"/>
									<param name="show_fps" value="off"/>
									<param name="show_position" value="off"/>
									<param name="show_logo"   value="off"/>
									<param name="locale" value="english"/>

									<param name="sleep"		value="300"/>
									<param name="show_counter"   value="off"/>
									<param name="show_backlightbutton" value="on"/>
									<param name="show_panobutton" value="on"/>
									<param name="bg_color" value="#f0f"/>
									<param name="copyright" value="{{baseURL}}"/>
									<param name="doc" value="1"/>
						</applet>
			<p>First, rotate the camera onto an interesting part of the scene.</p>
			
			<input type="button" onclick="ptzBuild2D.takeScreenshot()" value="Take Screenshot" />
		</div>
		<div id="canvasGroup" style="display:none">
			
			<canvas id='canvasObject' width='300' height='300'  onclick=''>
				Your browser does not support the canvas element, and cannot use this application.
			</canvas>
			<p><input type="button" onclick="ptzBuild2D.backToPTZApplet()" value="Take a Different Screenshot" /></p>
			<p>
			<form name="corrForm">
			Number of points: 
				{% for i in "123456"|make_list %}
				<label for="{{i}}point">
				<span class="group">
				<input type="radio" onchange="ptzBuild2D.initPoints();ptzBuild3D.initPoints(0,0,0);ptzBuild3D.centerPoints();" name="correspondence" id="{{i}}point" value="{{i}}" {% if forloop.first %} checked {%endif%} />
				 {{i}}
				</span>
				</label>
				{% endfor %}
				
			</form>
			</p>
			<p>Now, drag the 2D pin to interesting parts of the image.  Then, move the 3D pin in Google Earth to match the 2D pin.</p>
		

			<!-- Final form: holds correspondence values. -->
			<form name="finalform" id="finalform" action="insert" method="post" onsubmit="return validateForm()">
				
				{% if ptzScene %}
				<input type="hidden" id="sceneId" name='{{ptzScene.index}}'/> 
					{% if ptzScene.name %}
					<p>Scene Name: {{ptzScene.name}} </p>
					{% else %}
					<p>Scene Name: <input type="text" id="sceneName" name='sceneName'/> </p>
					{% endif %}
				{% else %}
				<p>Scene Name: <input type="text" id="sceneName" name='sceneName'/> </p>
				{% endif %}
				
				<input type="hidden" id="pan" name='pan'/> 
				<input type="hidden" id="tilt" name='tilt'/>
				<input type="hidden" id="zoom" name='zoom'/>
				<input type="hidden" id="lat" name='lat'/>
				<input type="hidden" id="lon" name='lon'/>
				<input type="hidden" id="alt" name='alt'/>
				<input type="hidden" id="u" name='u'/>
				<input type="hidden" id="v" name='v'/>
				<input type="hidden" id="sizeU" name="width" />
				<input type="hidden" id="sizeV" name="height" />
				<input type="hidden" value="{{sourceURL}}" name='sourceURL'/> 
				<input type="hidden" value="{{baseURL}}" name='baseURL'/>
				<input type="hidden" value="{{codeBaseURL}}" name='codeBaseURL'/> 
				<input type="hidden" id="noPoints" name='noPoints' />
				<input type="hidden" id="clockInTime" name="clockInTime" value="-1"/>
				<input type="hidden" id="numberOfClicks" name='numberOfClicks' value="0" />
				
				
				<p><input type="submit" value="Build" /></p>
				<span id="warning"></span>
			</form>
		</div>
	</div>
</div>

<div id="rightgroup">
	<div id="gecontainer">
		<!-- Google Earth Plugin. -->
		<div id='map3d'> </div>
		
		<div class="group">
			<form name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
				<input type="text" id="address" />
				<input type="submit" value="Search for Location" onclick="setTimeout('ptzBuild3D.centerPoints()', 2000);"/>
				<input type="button" value="Center pins" onclick="ptzBuild3D.centerPoints();" />
				<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked/>
				<label for="showBuildings">  Show Buildings </label>
				
				<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked/>
				<label for="showGrayBuildings">  Show Gray Buildings </label>
			</form>
		</div>
	</div>
</div>

	<div style="clear: both;"></div>

    </div><!-- end contentpage --> 
{% endblock %}
		
{% block scripts2 %} {% endblock %}